<template>
  <div>
    <Form :model="keyChange" :label-width="80" ref="keyChange" :rules="ruleValidate">
      <FormItem label="账户名">
        <Input v-model="keyChange.username" disabled></Input>
      </FormItem>
      <FormItem label="密码" prop="password">
        <Input type="password" v-model="keyChange.password" password></Input>
      </FormItem>
      <FormItem label="确认密码" prop="newpassword">
        <Input type="password" v-model="keyChange.newpassword" password></Input>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { validatePasswordSame } from '@/utils/regular.js';
export default {
  props: {
    passwordInfo: {
      type: Object,
      default: () =>{}
    }
  },
  data () {
    return {
      keyChange: this.passwordInfo,
      ruleValidate: {
        password: [
          { required: true, message: 'The password cannot be empty', trigger: 'blur' },
          { min: 6, max: 18, message: 'The password length is between 6 and 18', trigger: 'blur' }
        ],
        newpassword: [
          { required: true, message: 'The password cannot be empty', trigger: 'blur' },
          { min: 6, max: 18, message: 'The password length is between 6 and 18', trigger: 'blur' },
          { validator: validatePasswordSame, trigger: 'blur' }
        ]
      }
    };
  },
  watch: {
    keyChange: {
      handler(newV, oldV) {
        if (newV.password === newV.newpassword) {
          newV.verification = true;
        } else {
          newV.verification = false;
        }
      },
      deep: true
    }
  },
  methods: {

  }
};
</script>

<style>
</style>
